<template>
  <div class="avatar-group-wrap">
    <ul
      v-if="avatarList"
      class="list"
    >
      <li
        v-for="item in avatarList"
        :key="item.id"
        class="item"
        :style="{ width: size - 4 + 'px' }"
      >
        <img
          :width="size"
          :src="item.avatar"
          alt=""
        >
      </li>
    </ul>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, ref } from 'vue'

export interface AvatarItemProp {
  id: number;
  avatar: string;
}

export default defineComponent({
  name: 'AvatarGroup',
  props: {
    list: {
      type: Array, // 类型
      default: () => [] // 默认值
    }
  },
  setup (props) {
    const size = ref(30)
    const avatarList = computed(() => {
      return props.list as AvatarItemProp[]
    })

    return { size, avatarList }
  }
})
</script>

<style lang="scss" scoped>
.avatar-group-wrap {
  display: inline-block;
  .list {
    display: flex;
    margin: 0;
    padding: 0;
    .item {
      list-style: none;
      img {
        border-radius: 50%;
        border: 2px solid #fff;
      }
    }
  }
}
</style>
